<template>
  <span>{{ animatedValue }}</span>
</template>

<script>
export default {
  data() {
    return {
      animatedValue: 0,
    }
  },
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    progress(newValue) {
      this.animateNumber(newValue)
    },
  },
  methods: {
    animateNumber(toValue) {
      const duration = 2000
      const fps = 10
      const frames = (duration / 1000) * fps
      const increment = (toValue - this.animatedValue) / frames
      let currentFrame = 0

      const animate = () => {
        currentFrame++
        this.animatedValue += increment
        this.animatedValue = parseInt(this.animatedValue)
        if (currentFrame < frames) {
          requestAnimationFrame(animate)
        } else {
          this.animatedValue = toValue
        }
      }

      requestAnimationFrame(animate)
    },
  },
}
</script>
